<template>
	<view class="body" style="background-color: #fff">
		<!-- 自定义导航 -->
		<uni-nav-bar fixed :height="48" :border="false" statusBar>
			<view class="tableft" slot="left">分类</view>
			<view slot="right" @click="switchTo()">
				<image style="width: 70rpx;margin-top: 20rpx;" src="../../static/gifts.png" mode="widthFix"></image>
			</view>
		</uni-nav-bar>
		<!-- 搜索框 -->
		<view style="position: fixed;top: 48;left: 0;width: 100%;z-index: 5;background-color: #fff;">
			<uni-search-bar radius="18" placeholder="搜索书名、作者、关键字" @focus="goTo()" cancelButton="none"/>
		</view>
		<!-- 猜你喜欢 -->
		<view class="container topcell">
			<view>猜你喜欢</view>
			<view>
				<view class="card">
					<view class="topic">
						<view>
							<view>#设计必读</view>
							<view>干货满满</view>
						</view>
						<image src="../../static/topic2.jpg" mode="widthFix"></image>
					</view>
				</view>
				<view class="card" style="background-color: #edf3ff;">
					<view class="topic">
						<view>
							<view>#设计必读</view>
							<view>干货满满</view>
						</view>
						<image src="../../static/topic1.jpg" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 分类 -->
		<uni-segmented-control
			class="segmented"
			:current="current"
			:values="items"
			@clickItem="tabItem"
			activeColor="#ff604f"
			styleType="text"
		></uni-segmented-control>

		<view class="content container" v-show="current === current">
			<view class="card" v-for="(item, index) in list" :key="index" @click="toDetail(item.cid,item.min)">
				<view class="topic">
					<view>
						<view>{{item.min}}</view>
						<view>43672</view>
					</view>
					<image :src="item.cate_cover" mode="widthFix"></image>
				</view>
			</view>

			<!-- <view v-show="current === 1">选项卡2的内容</view> -->
			<!-- <view v-show="current === 2">选项卡3的内容</view> -->
		</view>
		<!-- 结束 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			items: ['男生', '女生'],
			list:[]
		};
	},
	mounted() {
		this.getData(this.current+1)
	},
	methods: {
		tabItem(e) {
			console.log(e)
			this.current = e.currentIndex;
			// 发送Ajax请求数据显示不同分类
			this.getData(this.current+1)
		},
		getData(major){
			uni.request({
				url:`${getApp().globalData.baseURL}/v1/novel/category/${major}`,
				success: (res) => {
					console.log(res.data.data)
					this.list=res.data.data
				}
			})
		},
		goTo(){
			uni.navigateTo({
				url:'/pages/search/search'
			})
		},
		// 跳转列表详情页面
		toDetail(cate,min){
			uni.navigateTo({
				url: `/pages/listsDetails/listsDetails?cate=${cate}&title=${min}`
			});
		},
		// 跳转到tab页 fuli
		switchTo(){
			uni.switchTab({
				url:'../fuli/fuli'
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.container {
	margin: 20rpx 40rpx;
}
// 自定义导航栏
.tableft {
	font-size: 42rpx;
	font-weight: 600;
}
// 搜索框
.uni-searchbar {
	padding: 7px;
}
// 搜索框 文字位置
/deep/.uni-searchbar__box {
	justify-content: flex-start;
	height: 56rpx;
}
// 顶部猜你喜欢
.topcell {
	margin-top: 50px;
	> view:first-child {
		margin: 20rpx 0;
		font-size: 32rpx;
		font-weight: 600;
	}
	> view:last-child {
		display: flex;
		justify-content: space-between;
		.card {
			width: 48%;
			padding: 20rpx;
			border-radius: 14rpx;
			box-sizing: border-box;
			// box-shadow: -2px 2px 7px 0 rgba(0, 0, 0, 0.1);
			background-color: #fff8e8;
			border: 1px solid #fff8e8;
			.topic {
				display: flex;
				justify-content: space-between;
				> view:first-child {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					> view:first-child {
						font-weight: 600;
						font-size: 32rpx;
					}
					> view:last-child {
						color: #999;
					}
				}
				> image {
					width: 80rpx;
					border-radius: 0 10rpx 10rpx 0;
				}
			}
		}
	}
}
// 分段器
.segmented {
	width: 400rpx;
	margin-bottom: 20rpx;
	/deep/.segmented-control__text {
		font-size: 32rpx;
		font-weight: 600;
	}
}

.content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.card {
		width: 48%;
		padding: 16rpx 18rpx;
		margin: 10rpx 0;
		border-radius: 14rpx;
		box-sizing: border-box;
		border: 1px solid #eee;
		.topic {
			display: flex;
			justify-content: space-between;
			> view:first-child {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				> view:first-child {
					font-weight: 600;
					font-size: 30rpx;
				}
				> view:last-child {
					color: #999;
				}
			}
			> image {
				width: 70rpx;
				border-radius: 0 10rpx 10rpx 0;
			}
		}
	}
}
</style>
